<template>
  <div class="page-header">
    <!-- <div class="header-content">
      <div class="logo-section">
        <div class="logo">
          <span class="logo-text">面包屑</span>
          <span class="logo-badge">题库预览</span>
        </div>
      </div>
      
      <div class="stats-section" v-if="showStats">
        <div class="stat-item">
          <el-icon><View /></el-icon>
          <span>访问人次: <span id="page_pv" class="stat-value">{{ pv }}</span></span>
        </div>
        <div class="stat-item">
          <el-icon><User /></el-icon>
          <span>访问人数: <span id="page_uv" class="stat-value">{{ uv }}</span></span>
        </div>
        <div class="stat-item">
          <el-icon><Timer /></el-icon>
          <span>更新时间: <span class="stat-value">{{ updateTime }}</span></span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { View, User, Timer } from '@element-plus/icons-vue';

defineProps({
  subtitle: {
    type: String,
    default: 'Python、数据结构、数据库原理'
  },
  showStats: {
    type: Boolean,
    default: true
  },
  pv: {
    type: [Number, String],
    default: '-'
  },
  uv: {
    type: [Number, String],
    default: '-'
  },
  updateTime: {
    type: String,
    default: '2025年1月5日'
  }
});
</script>

<style scoped>
.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.header-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .header-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.logo-section {
  display: flex;
  flex-direction: column;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.logo-text {
  font-size: 1.875rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-badge {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px;
  color: white;
  background: linear-gradient(135deg, #3b82f6, #f97316);
}

.subtitle {
  font-size: 1.125rem;
  color: #4b5563;
}

.stats-section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.stat-value {
  font-weight: 500;
  color: #374151;
}
</style> 